<template>
  <div>
    <div class="main">
      <div class="left">
        <el-tree
          icon-class=" "
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
          <span
            slot-scope="{ node, data }"
            class="slot-t-node"
            style="margin-right: 10px"
          >
            <template>
              <i
                :class="{
                  'el-icon-folder-add': !node.expanded,
                  'el-icon-folder-remove': node.expanded,
                  'el-icon-circle-plus-outline':
                    !node.expanded && data.type === 2,
                  'el-icon-remove-outline': node.expanded && data.type === 2,
                  'el-icon-star-on': data.type === 3,
                }"
                style="color: rgb(225, 85, 54)"
              />
              <span>{{ node.label }}</span>
            </template>
          </span>
        </el-tree>
      </div>
      <div class="right">
        <div
          style="
            height: 70px;
            width: 100%;
            background-color: rgb(248, 250, 255);
          "
        >
          <el-row class="header">
            <span
              style="
                font-size: 17px;
                font-weight: 700;
                height: 70px;
                width: 140px;
                line-height: 70px;
                float: left;
                text-align: center;
              "
              >作业范围</span
            >
            <div style="float: right; line-height: 70px; margin-right: 40px">
              <el-button
                v-if="!isDone"
                style="width: 100px"
                type="primary"
                size="medium"
                @click="isDone = true"
                >编辑</el-button
              >
              <div v-else style="float: right; line-height: 70px">
                <el-button
                  style="width: 100px; margin-right: 15px"
                  type="primary"
                  size="medium"
                  >保存</el-button
                >
                <el-button style="width: 100px" @click="close" size="medium"
                  >取消</el-button
                >
              </div>
            </div>
          </el-row>
        </div>
        <div style="height: 70px; width: 100%; line-height: 70px">
          <el-form style="margin-top: 25px; margin-left: 40px">
            <el-form-item label="地区关键词：">
              <el-input style="width: 238px"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="isDone" style="height: 70px; width: 100%; line-height: 70px">
          <el-button
            style="width: 100px; margin-left: 50px"
            type="primary"
            size="medium"
            @click="editFugai"
            >开始绘制</el-button
          ><el-button
            v-if="editDone"
            style="width: 100px; margin-left: 21px"
            size="medium"
            @click="editFugai"
            >删除围栏</el-button
          >
        </div>
        <baidu-map
          class="map"
          :center="diyue"
          :zoom="11"
          style="height: 100vh"
          @click="addPolygonPoint"
          :scroll-wheel-zoom="true"
        >
          <bm-polygon
            :path="polygonPath"
            stroke-color="rgb(251, 98, 50)"
            strokeStyle="solid"
            :stroke-opacity="0.7"
            :stroke-weight="1"
            :editing="editDone"
            fillColor="rgb(251, 98, 50)"
            :fillOpacity="0.3"
            @lineupdate="updatePolygonPath"
          />
        </baidu-map>
      </div>
    </div>
  </div>
</template>

<script>
import { getMapData, getTreeApi } from "@/api/JchuDate";

export default {
  data() {
    return {
      editDone: false,
      isDone: false,
      diyue: { lng: 116.404, lat: 39.915 },
      treeData: [],
      PathMap: {
        lng: "longitude",
        lat: "latitude",
      },
      polygonPath: [
        { lng: 116.412732, lat: 39.911707 },
        { lng: 116.39455, lat: 39.910932 },
        { lng: 116.403461, lat: 39.921336 },
        { lng: 116.391388, lat: 39.917988 },
        { lng: 116.413809, lat: 39.922028 },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  created() {
    this.getDateInfo();
  },
  methods: {
    close() {
      this.editDone = false;
      this.isDone = false;
    },
    editFugai() {
      this.editDone = true;
      // this.isDone = true;
      console.log(this.polygonPath);
    },
    async handleNodeClick(data) {
      console.log(data);
      //   获取地图覆盖点
      const res1 = await getMapData(data.id);
      console.log(res1.data.data);
      const polygon = res1.data.data.polygon;
      if (polygon === null) {
        return;
      } else {
        this.diyue.lng = data.longitude;
        this.diyue.lat = data.latitude;
        // console.log(polygon);
        const arr = [];
        polygon.map((item) => {
          arr.push({
            lng: item.longitude,
            lat: item.latitude,
          });
        });
        this.polygonPath = arr;
      }
    },

    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath();
    },
    addPolygonPoint() {
      this.polygonPath.push({ lng: 116.404, lat: 39.915 });
    },
    async getDateInfo() {
      const res = await getTreeApi();
      this.treeData = JSON.parse(res.data.data);
      console.log(this.treeData);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .main {
  display: flex;
  justify-content: space-between;
  .left {
    border-radius: 8px;
    background-color: white;
    width: 260px;
    //height: 300px;
    padding-left: 12px;
    padding-top: 14px;
  }
  .right {
    border-radius: 8px;
    width: 950px;
    background-color: white;
    .header {
      width: 950px;
      float: left;
    }
    .map {
      margin: 20px;
    }
  }
}
</style>
